<template>
	<view class="box bg-white roundedtx30">
		<view class="d-flex j-sb">
			<view class="d-flex flex-row pl-2 a-center j-center" style="height: 50px;">
				<text class="d-flex iconfont icon-shipin text-black2 font-weight" style="font-size: 32px;"></text>
				<view class="d-flex" style="font-size: 36rpx;margin-left: 6rpx;"> {{curInfo.name}}</view>
				<view class="d-flex flex-shrink" style="font-size: 36rpx;margin-left: 12rpx;">
					共{{curInfo.last_episode_number}}集</view>
			</view>
			<view class="d-flex position-absolute top-0 right-0" @tap.stop="close" style="width: 50px;height: 42px;">
				<text class="d-flex position-absolute left-15 iconfont icon-xiala text-black2 font-weight" style="font-size: 18px;bottom: 7px;"></text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="videolist-container" scroll-with-animation @scroll="scroll" :scroll-into-view="scrollId">
			<view v-if="showList.length">
				<view style="display: flex;flex-wrap: wrap;position: absolute;">
					<view class="d-flex flex-wrap" style="margin-left: 4%;">
						<view :id="'tag'+(index+1)" class="mb-3" style="width:  32%;justify-content: center;align-items: center;display: flex;"
							v-for="(item,index) in showList" :key="index">
							<view class="d-flex" style="width:  94%;">
								<view @tap="onclick(index)" class="d-flex w-100 position-relative j-center">
									<text class="position-absolute bottom-0 text-white" :style="{fontSize:item.playlet_number_name.length>=7?'28rpx':'30rpx'}">
										{{item.playlet_number_name}}</text>
									<image class="rounded10" style="width: 230rpx;height: 384rpx;" :src="item.thumbnail||item.cover" mode="scaleToFill"></image>
									<view class="rounded10" v-if="item.pay_staus===0"
										style="width: 100%;height: 100%;background-color: black;position: absolute;opacity: 0.3;">
									</view>
									<image class="rounded10" v-if="item.pay_staus===0"
										style="width: 70rpx;height: 70rpx;position: absolute;top: 0;left:0;right:0;bottom:0;margin: auto;"
										src="@/static/video/video-lock.png"></image>
									<view class="rounded10" v-if="playlet_number===item.playlet_number"
										style="padding:8rpx 12rpx;font-size: 24rpx; position: absolute;top: 0;right:0; background-color: #404040;color: #FFFFFF;">
										刚刚播放</view>
									<view class="rounded10" v-if="playlet_number!==item.playlet_number && item.pay_staus===0"
										style="padding:8rpx 12rpx;font-size: 24rpx; position: absolute;top: 0;left:0; background-color: #404040;color: #FFFFFF;">
										{{item.amount+' '+kanbi }}</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="loading" class="d-flex h-100 a-center j-center">
				<view class="d-flex flex-column loadingMain a-center j-center rounded30">
					<u-loading-icon mode="semicircle" vertical size="30" text="剧集加载中" color="#FAA55D"></u-loading-icon>
				</view>
			</view>
			<view v-else class="d-flex h-100 a-center j-center">
				<text class="d-flex text-black6 font-md">暂无剧集</text>
			</view>
		</scroll-view>
		<view class="d-flex" style="height: 20rpx;"></view>
		<!-- <view class="d-flex">
			<view class="d-flex w-100 a-center j-center py-2">
				<view class="d-flex"> 点击右侧按钮更新会提醒您！</view>
				<view @click="onSubscribe()" style="width: 194rpx;
							height: 62rpx;
							background: #E68B3E;
							border-radius: 32rpx 32rpx 32rpx 32rpx;
							color: #FFFFFF;
							font-size: 28rpx;
							opacity: 1;align-items: center;text-align: center;display: flex;justify-content: center;">更新提醒我
				</view>
			</view>
		</view> -->
	</view>
</template>


<script>
	let that;
	import {
		mapState
	} from 'vuex';
	import tools from "@/utils/tools.js"
	import config from '@/utils/config.js'
	export default {
		name: "vdlist",
		props: {
			init: {
				type: Number,
				default: 0
			},
			curInfo: {
				type: Object,
				default: {}
			},
			listAll: {
				type: Array,
				default: []
			},
			buy_episodes_list: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				kanbi:uni.getStorageSync(config.coin_name) || "",
				scrollId:'',
				loading:true,
				clickIndex:1,
				showList: [],
				playlet_number: 1,
				itemHeight: 160, //每条数据所占高度
				_is_vip: -1,
			}
		},
		computed: {
			...mapState({
				continuous: state => state.user.continuous,
				userInfo: state => state.user.userInfo,
				statusBarHeight: state => state.layout.statusBarHeight,
				windowWidth: state => state.layout.windowWidth,
				windowHeight: state => state.layout.windowHeight,
				platform: state => state.layout.platform
			})
		},
		watch: {
			init: {
				handler(newVal) {
					console.log(newVal);
					this.loading = true;
					this.playlet_number = this.curInfo.playlet_number;
					tools.isVip(that, (is_vip) => {
						that._is_vip = is_vip ? 1 : 0;
						that.getShowList();
						// that.$nextTick(() => {
						// 	setTimeout(that.DelayLoad, 100)
						// })
					})
					let list = tools.getTodayLike()
					console.log("getTodayLike", list)
					
					let list_1 = tools.getTodayZhuiJu()
					console.log("getTodayZhuiJu", list_1)
				},
				deep:true
			},
		},
		created() {
			that = this;
		
		},
		mounted() {
		},
		methods: {
			onSubscribe() {
				tools.setup_subscribeMessage()
			},
			onclick(index) {
				this.clickIndex = index;
				this.close(that.showList[index])
				console.log("onclick", that.showList[index].playlet_number_name)
			},
			DelayLoad() {
				if (that.showList.length === that.listAll.length) {
					clearTimeout(that.DelayLoad);
				} else {
					setTimeout(that.DelayLoad, 100);
					that.getShowList();
				}
			},
			scroll() {

				// console.log("scrolltolower")

				// let container = uni.createSelectorQuery().in(this).select(".container");
				// // 利用uniapp提供的接口获取可视区域的高度和滚动高度
				// 	// let query=uni.createSelectorQuery()
				// 	// let container=query.select('.box');
				// 	container.fields({
				// 		// rect:true,   //是否返回节点布局位置信息{left,top,right,bottom}
				// 		size:true,  //是否返回节点尺寸信息{width，height}
				// 		scrollOffset:true //是否返回节点滚动信息{scrollLeft,scrollTop}
				// 	},(res)=>{
				// 		console.log(res)
				// 		this.scrollTop=res.scrollTop
				// 		// this.contentHeight=res.height
				// 		// this.getShowList();//因为所在函数是异步
				// }).exec()
				// this.getShowList()
			},
			getShowList() {
				console.warn('=====videolist=====');
				// console.log(this.listAll);
				if(!this.listAll.length){
					uni.showToast({
						title: '暂无剧集',
						icon: "none",
						duration: 2000,
					});
					return
				}
				that.scrollId = 'tag1';
				let endIndex = this.listAll.length;
				this.showList = [];
				for (let i = 0; i < endIndex; i++) {
					// console.log("getShowList",i)
					if (that._is_vip === config.VIP) {
						this.listAll[i].pay_staus = config.pay_staus.purchased
					} else {
						if (this.listAll[i].pay_staus === config.pay_staus.not_Purchased) {
							for (var j = 0; j < this.buy_episodes_list.length; j++) {
								if (this.listAll[i].playlet_number === this.buy_episodes_list[j]) {
									this.listAll[i].pay_staus = config.pay_staus.purchased;
									break;
								}
							}
						}
					}
					// #ifdef MP-WEIXIN || MP-KUAISHOU
					if(this.platform=='android'){
						this.showList.push(this.listAll[i]);
					}else{
						//iOS
						if(this.listAll[i].pay_staus==1){
							this.showList.push(this.listAll[i]);
						}else{
							// ios_payment 1允许支付-出现付费集   0不允许支付-不出现付费集
							if(this.userInfo.ios_payment==1){
								this.showList.push(this.listAll[i]);
							}
						}
					}
					// #endif
					// #ifdef MP-TOUTIAO
					this.showList.push(this.listAll[i]);
					// #endif
				}
				this.loading = false;
				this.$nextTick(()=>{
					setTimeout(()=>{
						that.scrollId = 'tag'+that.playlet_number;
					},50)
				})
				console.log(139,this.showList)
				// console.log(this.showList);
			},
			close(_item) {
				console.log(235,_item)
				this.$emit('closevl', _item);
			},
			getLevelStr(num) {
				return tools.intToChinese(num)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.box {
	}

	.videolist-container {
		height: 70vh;
		overflow-y: scroll;
		z-index: 9999;
	}
</style>